<template>
	<view class="container">
		<view class="header">
			<text class="title">邀请好友组队</text>
			<text class="subtitle">邀请好友一起参与公益捐步</text>
		</view>
		
		<view class="team-info">
			<view class="info-card">
				<text class="info-label">团队名称</text>
				<text class="info-value">{{ teamInfo.name }}</text>
			</view>
			<view class="info-card">
				<text class="info-label">团队人数</text>
				<text class="info-value">{{ teamInfo.memberCount }}/{{ teamInfo.maxMembers }}</text>
			</view>
			<view class="info-card">
				<text class="info-label">团队步数</text>
				<text class="info-value">{{ teamInfo.totalSteps }}步</text>
			</view>
		</view>
		
		<view class="invite-methods">
			<text class="section-title">邀请方式</text>
			<view class="method-list">
				<view class="method-item" @click="shareToWechat">
					<view class="method-icon">💬</view>
					<text class="method-name">微信好友</text>
				</view>
				<view class="method-item" @click="shareToMoments">
					<view class="method-icon">📱</view>
					<text class="method-name">朋友圈</text>
				</view>
				<view class="method-item" @click="copyInviteLink">
					<view class="method-icon">🔗</view>
					<text class="method-name">复制链接</text>
				</view>
				<view class="method-item" @click="generateQRCode">
					<view class="method-icon">📷</view>
					<text class="method-name">二维码</text>
				</view>
			</view>
		</view>
		
		<view class="team-members">
			<text class="section-title">团队成员</text>
			<view class="member-list">
				<view class="member-item" v-for="(member, index) in teamMembers" :key="index">
					<view class="member-avatar">
						<image :src="member.avatar" mode="aspectFill"></image>
					</view>
					<view class="member-info">
						<text class="member-name">{{ member.name }}</text>
						<text class="member-steps">{{ member.steps }}步</text>
					</view>
					<view class="member-role" v-if="member.isLeader">队长</view>
				</view>
			</view>
		</view>
		
		<view class="invite-code">
			<text class="code-label">邀请码</text>
			<text class="code-value">{{ inviteCode }}</text>
			<button class="copy-btn" @click="copyInviteCode">复制</button>
		</view>
		
		<view class="invite-rules">
			<text class="section-title">邀请规则</text>
			<text class="rules-content">
				1. 每个团队最多可邀请10名成员
				2. 被邀请用户需完成注册并加入团队
				3. 团队成员每日步数将累计到团队总步数
				4. 团队步数达到目标可获得额外奖励
			</text>
		</view>
		
		<!-- 设计图参考 -->
		<view class="design-reference">
			<text class="reference-title">设计参考图</text>
			<image class="design-image" :src="getImageUrl('体彩小程序文件夹(_F)/JPG/1021-10.jpg')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
	data() {
		return {
			teamInfo: {
				name: '公益行走队',
				memberCount: 3,
				maxMembers: 10,
				totalSteps: 25600
			},
			inviteCode: 'TC2024001',
			teamMembers: [
				{
					name: '张三',
					avatar: getImageUrl('avatar1.jpg'),
					steps: 8500,
					isLeader: true
				},
				{
					name: '李四',
					avatar: getImageUrl('avatar2.jpg'),
					steps: 9200,
					isLeader: false
				},
				{
					name: '王五',
					avatar: getImageUrl('avatar3.jpg'),
					steps: 7900,
					isLeader: false
				}
			]
		}
	},
	methods: {
		getImageUrl,
		shareToWechat() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 0,
				title: '邀请你加入公益行走队',
				summary: '一起参与公益捐步，为公益事业贡献力量！',
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				}
			})
		},
		shareToMoments() {
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				title: '邀请你加入公益行走队',
				summary: '一起参与公益捐步，为公益事业贡献力量！',
				success: () => {
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					})
				}
			})
		},
		copyInviteLink() {
			const inviteLink = `https://ticai.com/team/join?code=${this.inviteCode}`
			uni.setClipboardData({
				data: inviteLink,
				success: () => {
					uni.showToast({
						title: '链接已复制',
						icon: 'success'
					})
				}
			})
		},
		copyInviteCode() {
			uni.setClipboardData({
				data: this.inviteCode,
				success: () => {
					uni.showToast({
						title: '邀请码已复制',
						icon: 'success'
					})
				}
			})
		},
		generateQRCode() {
			uni.showModal({
				title: '二维码邀请',
				content: '二维码功能开发中，敬请期待！',
				showCancel: false
			})
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.header {
	text-align: center;
	padding: 30rpx 20rpx;
	background: white;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.team-info {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
}

.info-card {
	flex: 1;
	background: white;
	padding: 30rpx;
	border-radius: 20rpx;
	text-align: center;
}

.info-label {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 10rpx;
}

.info-value {
	font-size: 28rpx;
	font-weight: bold;
	color: #4A90E2;
}

.invite-methods {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	display: block;
}

.method-list {
	display: flex;
	gap: 20rpx;
}

.method-item {
	flex: 1;
	text-align: center;
	padding: 30rpx;
	background: #f9f9f9;
	border-radius: 15rpx;
}

.method-icon {
	font-size: 48rpx;
	margin-bottom: 10rpx;
	display: block;
}

.method-name {
	font-size: 24rpx;
	color: #333;
}

.team-members {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.member-list {
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.member-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background: #f9f9f9;
	border-radius: 15rpx;
}

.member-avatar {
	width: 80rpx;
	height: 80rpx;
	margin-right: 20rpx;
}

.member-avatar image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.member-info {
	flex: 1;
}

.member-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.member-steps {
	font-size: 24rpx;
	color: #666;
}

.member-role {
	background: #4A90E2;
	color: white;
	padding: 5rpx 15rpx;
	border-radius: 15rpx;
	font-size: 22rpx;
}

.invite-code {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.code-label {
	font-size: 28rpx;
	color: #333;
}

.code-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #4A90E2;
	margin: 0 20rpx;
}

.copy-btn {
	width: 100rpx;
	height: 60rpx;
	background: #4A90E2;
	color: white;
	border: none;
	border-radius: 30rpx;
	font-size: 24rpx;
}

.invite-rules {
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	padding: 30rpx;
}

.rules-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	white-space: pre-line;
}

.design-reference {
	background: rgba(255,255,255,0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
}

.reference-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.design-image {
	width: 100%;
	max-height: 400rpx;
	border-radius: 10rpx;
}
</style>
